<template>
    <div>
      <!--导航-->
      <Main_header></Main_header>
      <router-view class="main"></router-view>
      <div class="common">
        <div class="banner">
          <el-carousel indicator-position="outside" height="480px">
            <el-carousel-item v-for="(item,index) in banner" :key="index">
              <!--<h3>{{ item.url }}</h3>-->
              <img :src=item.picA style="width: 100%;height: 100%;border-radius: 10px;">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content">
          <div class="contentImg">
            <div class="title">
              <h2>优选商铺</h2>
            </div>
            <div>
              <el-row>
                <el-col :span="12" v-for="(pic,index) in picture" :key="index" style="margin-bottom: 50px">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <img :src="pic.url" @click="toAllStore(pic)" style="width: 70%;height: 350px;padding-left: 100px">
                    <div style="margin-left: 250px">
                      <span class="messages">更多资讯，等你</span>
                      <span class="description">点我看更多惊喜</span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <!--电子设备图片展示-->
          <div class="contentImg">
            <div class="title">
              <h2>电子设备</h2>
            </div>
            <div>
              <el-row>
                <el-col :span="6" v-for="(good,index) in goods" :key="index" style="margin-bottom: 50px">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <img :src="good.imgurl" @click="toDetail(good,index)" style="width: 100%">
                    <div style="padding: 14px">
                      <span class="messages">{{good.goodName}}</span>
                      <span class="description">{{good.description}}</span>
                      <div class="bottom clearfix">
                        <div class="good-item">
                          ￥{{good.rentPriceHour}}/小时~￥{{good.rentPriceDay}}/天
                        </div>
                        <!--<el-button type="text" class="button">操作按钮</el-button>-->
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>

          <!--节日服装图片展示-->
          <div class="contentImg">
            <div class="title">
              <h2>节日服装</h2>
              <div>
              </div>
            </div>
            <div>
              <el-row>
                <el-col :span="6" v-for="(yifu,index) in yifus" :key="index" style="margin-bottom: 50px">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <img :src="yifu.imgurl" @click="toDetail(yifu,index)" style="width: 100%">
                    <div style="padding: 14px">
                      <span class="messages">{{yifu.goodName}}</span>
                      <span class="description">{{yifu.description}}</span>
                      <div class="bottom clearfix">
                        <div class="good-item">
                          ￥{{yifu.rentPriceHour}}/小时~￥{{yifu.rentPriceDay}}/天
                        </div>
                        <!--<el-button type="text" class="button">操作按钮</el-button>-->
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>


          <!--道具图片展示-->
          <div class="contentImg">
            <div class="title">
              <h2>道具</h2>
              <div>
              </div>
            </div>
            <div>
              <el-row>
                <el-col :span="6" v-for="(daoju,index) in daojus" :key="index">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover" >
                    <img :src="daoju.imgurl" @click="toDetail(daoju,index)" style="width: 100%;height: 250px ">
                    <div style="padding: 14px">
                      <span class="messages">{{daoju.goodName}}</span>
                      <span class="description">{{daoju.description}}</span>
                      <div class="bottom clearfix">
                        <div class="good-item">
                          ￥{{daoju.rentPriceHour}}/小时~￥{{daoju.rentPriceDay}}/天
                        </div>
                        <!--<el-button type="text" class="button">操作按钮</el-button>-->
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <div>

            <!--更多展示-->
            <div class="contentImg" style="margin-top: 50px;margin-bottom: 100px">
              <div class="title">
                <h4><a>查看更多  >>  </a></h4>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Main_footer style="margin:0 auto"></Main_footer>
    </div>
</template>

<script>
  import Main_header from '../components/main/Main_header'
  import Main_footer from '../components/main/Main_footer'
  export default {
    name: 'Main',
    data(){
      return{
        banner: [],
        picture:[
          { url:require("../assets/img/f1.jpg") ,name:1},
          { url:require("../assets/img/f4.jpg") ,name:2},
        ],
        goods:[],
        yifus:[],
        daojus:[]
      }
    },
    components:{
      Main_header,
      Main_footer
    },
    mounted(){
      this.initBanner();
      this.initdianzi();
      this.inityifu();
      this.initdaoju();
    },
    methods:{
      // 传递参数到detail页面
      toDetail(good,index) {
        if(window.sessionStorage.getItem('user')){
          this.$router.push({
            path: '/detail',
            name: 'Detail',
            params: {
              name: good.goodId,
            }
            /*query: {
                name: 'name',
                dataObj: this.msg
            }*/
          })
        }else{
          this.$router.push('/');
          this.$notify.info({ title: '消息', message: '尚未登录，请登录'});
        }
      },
      toAllStore(data){
        console.log(data.name)
        // 跳转到商铺页面
        if(data.name===1){
          this.$router.push({
            path: '/allStore',
            name: 'AllStore',
          })
        }else { //跳转到求租页面
          this.$router.push({
            path: '/askGood',
            name: 'AskGood',
          })
        }
      },
      initBanner(){
        this.getRequest('/personal/data/pic/status').then(resp => {
          if (resp) {
            this.banner = resp;
          }
        })
      },
      //查询全部数据
      initdianzi () {
        let cate='电子设备';
        this.postRequest('/goodList/?category='+cate).then(resp => {
          if (resp) {
            console.log(resp);
            this.goods=resp;
          }
        })
      },
      inityifu () {
        let cate='节日服装';
        this.postRequest('/goodList/?category='+cate).then(resp => {
          if (resp) {
            console.log(resp);
            this.yifus=resp;
          }
        })
      },
      initdaoju () {
        let cate='道具';
        this.postRequest('/goodList/?category='+cate).then(resp => {
          if (resp) {
            console.log(resp);
            this.daojus=resp;
          }
        })
      },
    }
  }
</script>

<style>

  .common{
    width: 80%;
    margin: 0 auto;
  }
  .banner{
    width: 100%;
    margin: 20px 0;
  }
  .content{
    width: 100%;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .contentImg{
    width: 100%;
  }
  .messages{
    white-space: nowrap;  /*强制span不换行*/
    display: inline-block;  /*将span当做块级元素对待*/
    width: 100%;  /*限制宽度 可设px*/
    overflow: hidden;  /*超出宽度部分隐藏*/
    text-overflow: ellipsis;  /*超出部分以点号代替*/
    color: #6c7781;
  }
  .good-item {
    margin: 10px 0;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #d44d44;
    font-family: Arial;
    font-size: 18px;
    font-weight: 700;
  }
  .description {
    text-align: center;
    line-height: 1.2;
    font-size: 10px;
    color: #d0d0d0;
    padding: 3px;
    white-space: nowrap;  /*强制span不换行*/
    display: inline-block;  /*将span当做块级元素对待*/
    overflow: hidden;  /*超出宽度部分隐藏*/
    text-overflow: ellipsis;  /*超出部分以点号代替*/
  }
  .title{
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    color: #6c7781;
    font-family: 幼圆;
    padding: 0 10px 0 24px;
    border-bottom: 1px
    solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(#fbfbfb, #fafafa);
    line-height: 60px;
    font-size: 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
  }
</style>

